import React, { Component } from 'react'
import { Button ,Input,Table } from 'antd';
import { DownloadOutlined ,SearchOutlined} from '@ant-design/icons';
export default  class address extends Component{
    state = {

    };

    render(){
        const columns = [
            {
                title: '地址ID',
                dataIndex: 'addressid',
                key: 'addid',
                render: text => <a>{text}</a>,
            },
            {
                title: '用户ID',
                dataIndex: 'userid',
                key: 'userid',
            },
            {
                title: '收款人姓名',
                dataIndex: 'name',
                key: 'name',
            },
            {
                title: '手机号码',
                dataIndex: 'pho',
                key: 'pho',
            },
            {
                title: '区域地址',
                dataIndex: 'region',
                key: 'region',
            },
            {
                title: '详细地址',
                dataIndex: 'address',
                key: 'address',
            },
            {
                title: '默认',
                dataIndex: 'type',
                key: 'type',
            },
        ];

        const data = [
            {
                key: '1',
                addressid: '1',
                userid: '1',
                name: "张三",
                pho:15588883333,
                region:"北京",
                address:'1-2',
                type: '可用',
            },
            {
                key: '1',
                addressid: '1',
                userid: '1',
                name: "张三",
                pho:15588883333,
                region:"北京",
                address:'1-2',
                type: '可用',
            },
            {
                key: '1',
                addressid: '1',
                userid: '1',
                name: "张三",
                pho:15588883333,
                region:"北京",
                address:'1-2',
                type: '可用',
            },
        ];
        const onChange = e => {
            console.log(e);
        };
        return (
            <div>
                <div>
                    <Input className="input fl"  placeholder="请输入用户ID"  allowClear onChange={onChange} />
                    <Input className="input fl" placeholder="请输入收款人姓名"  allowClear onChange={onChange} />
                    <Button  type="primary" icon={<SearchOutlined />}>查找</Button>
                    <Button  className="bottom-item" type="primary" icon={<DownloadOutlined />}>导出</Button>
                </div>
                <div className="tablebox">
                    <Table
                        columns={columns}
                        dataSource={data}
                        bordered
                    />
                </div>



            </div>
        )
    }
}
